<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="16">
            <a-form-item
              label="热搜名称">
              <a-auto-complete
                v-model="queryParam.hotTitle"
                :data-source="dataSource"
                placeholder="请输入热搜名称"
                @search="titleOnSearch"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="16">
            <a-form-item
              label="热搜类型">
              <a-select placeholder="请选择热搜类型"
                        v-decorator="[ 'hotType', {rules: [{ required: true, message: '请选择热搜类型'}]} ]"
                        @change="handleChange"
              >
                <a-select-option value="汽车">汽车</a-select-option>
                <a-select-option value="全站">全站</a-select-option>
                <a-select-option value="时尚">时尚</a-select-option>
                <a-select-option value="影视">影视</a-select-option>
                <a-select-option value="体育">体育</a-select-option>
                <a-select-option value="数码">数码</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="!advanced && 8 || 24" :sm="24">
            <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button type="primary" @click="handleSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table
      size="default"
      ref="table"
      rowKey="key"
      :columns="columns"
      :loading="loading"
      :data="loadData"
      :pagination="false"
      showPagination="auto"
    >
      <span slot="hotLink" slot-scope="text">
        <a :href="text">{{ "点此跳转" }}</a>
      </span>
      <span slot="hotDetail" slot-scope="text">
        <div>
          {{ text | textFilter }}
        </div>
      </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleInfo(record)">详情</a>
          <a-divider type="vertical" />
          <a @click="handleAnswer(record)">回答</a>
        </template>
      </span>
    </s-table>
    <hot-zh-info ref="hotZhInfo" @ok="handleOk"></hot-zh-info>
  </a-card>
</template>

<script>
  import HotZhInfo from '@/views/hot/modules/Zh/HotZhInfo'
  import HotZhAnswer from '@/views/hot/modules/Zh/HotZhAnswer'
  import { STable } from '@/components'
  import AutoComplete from 'ant-design-vue'
  import { queryKnow } from '@/api/hot/know'
  import { queryByUserId, addByUserId } from '@/api/hot/search'
  // 用于处理过滤器动态获取数据
  let that

  export default {
    name: 'ZhHot',
    components: {
      STable,
      HotZhInfo,
      HotZhAnswer
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        data: [],
        searchMsgs: {},
        dataSource: [],
        // 高级搜索 展开/关闭
        advanced: false,
        // 查询参数
        loading: false,
        // 查询参数
        queryParam: {},
        // 需要的数据
        roles: [],
        // 表头
        columns: [
          {
            title: '热搜标题',
            dataIndex: 'hotTitle',
            key: 'hotTitle',
            align: 'center',
            sorter: false
          },
          {
            title: '热搜详情',
            dataIndex: 'hotDetail',
            key: 'hotDetail',
            align: 'center',
            scopedSlots: { customRender: 'hotDetail' },
            sorter: false
          },
          {
            title: '热搜类型',
            dataIndex: 'hotType',
            key: 'hotType',
            align: 'center',
            sorter: false
          },
          {
            title: '热搜链接',
            dataIndex: 'hotLink',
            key: 'hotLink',
            align: 'center',
            scopedSlots: { customRender: 'hotLink' },
            ellipsis: true,
            sorter: false
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // 统一处理查询参数，便于后端表格DTO用固定参数接
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          return queryKnow(Object.assign(parameter, queryJson))
            .then(res => {
              // console.log(res)
              this.loading = false
              return res.result
            })
        },
        optionAlertShow: false
      }
    },
    filters: {
      numberColorFilter (value) {
        return 'blue'
      },
      textFilter (value) {
        if (value === null || value === undefined) {
          return '---------'
        } else {
          if (value.length > 12) {
            return value.substring(0, 10) + '...'
          }
          return value
        }
      },
      roleTextFilter (roleId) {
        let roleName = ''
        for (const role of that.roles) {
          if (parseInt(role.id) === parseInt(roleId)) {
            roleName = role.name
            break
          }
        }
        return roleName
      },
      dateTextFilter (departureTime) {
        if (departureTime === null) {
          return '-'
        }
        return departureTime
      },
      statusFilter (key) {
        return key
      },
      numberFilter (key) {
        return key
      }
    },
    beforeCreate () {
      that = this
    },
    created() {
      queryByUserId()
        .then(res => {
          console.log(res.result)
          this.searchMsgs = res.result
        })
    },
    methods: {
      handleOk (res) {
        this.data = res
        this.$refs.table.refresh(false)
      },
      handleInfo (record) {
        this.$refs.hotZhInfo.info(record)
      },
      handleAnswer (record) {
        this.$router.push({
          path: '/hot/ZhAnswer',
          query: {
            'questionId': record.questionId
          }
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      titleOnSearch (searchText) {
        const msgs = []
        // console.log(this.searchMsgs)
        for (const item of this.searchMsgs) {
          msgs.push(item.searchMsg)
        }
        this.dataSource = msgs
      },
      handleChange (val) {
        this.queryParam.hotType = val
      },
      handleSearch (val) {
        const title = this.queryParam.hotTitle
        if (title !== null || title !== undefined)  {
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          addByUserId(queryJson).then().catch(err => {
            this.$message.error(err.result || '添加检索信息失败！')
          })
        }
        this.$refs.table.refresh(true)
      },
      reset () {
        this.queryParam = {}
      }
    }
  }
</script>
